<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="退款状态">
				<el-select v-model="state.queryParams.status" clearable>
					<el-option v-for="item in refund_status" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<Refund ref="refundRef" @initPage="initPage"></Refund>

		<!-- 列表 -->
		<el-table v-loading="loading" :data="state.tableData" border>
			<el-table-column prop="orderItemList" label="商品信息" width="400">
				<template #default="scope">
					<el-row>
						<el-col :span="6">
							<el-image style="width: 80px; height: 80px" :src="scope.row.orderItem.picUrl" fit="cover" :preview-teleported="true"></el-image>
						</el-col>
						<el-col :span="18">
							<div class="overflow-line-clamp-2 name">{{ scope.row.orderItem.spuName }}</div>
							<p>{{ scope.row.orderItem.specsInfo }}</p>
							<div style="display: flex; justify-content: space-between">
								<span style="color: red">￥{{ scope.row.orderItem.totalPrice }}</span>
								x{{ scope.row.orderItem.buyQuantity }}
							</div>
						</el-col>
					</el-row>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="220">
				<template #default="scope">
					<p>
						退单状态：
						<el-tag :type="scope.row.status == '11' || scope.row.status == '12' ? 'success' : 'danger'" effect="light" round>{{
							scope.row.statusDesc
						}}</el-tag>
					</p>
					<p>
						是否到账：
						<el-tag :type="scope.row.arrivalStatus == '1' ? 'success' : 'danger'" effect="light" round>{{
							scope.row.arrivalStatus == '1' ? '已到账' : '未到账'
						}}</el-tag>
					</p>
					<p v-if="scope.row.userReceivedAccount">
						退回方式：
						<span style="color: #c0c4cc">{{ scope.row.userReceivedAccount }}</span>
					</p>
					<p v-if="scope.row.userReceivedAccount">
						退款流水号：
						<span style="color: #c0c4cc">{{ scope.row.refundId }}</span>
					</p>
				</template>
			</el-table-column>
			<el-table-column prop="refundAmount" label="退款金额"></el-table-column>
			<el-table-column prop="refundReason" label="退款原因"></el-table-column>
			<el-table-column prop="refuseReason" label="拒绝退款原因"></el-table-column>
			<el-table-column label="操作" width="200" align="center" fixed="right">
				<template #default="scope">
					<el-button link type="primary" @click="doRefund(scope.row.id)">{{
						scope.row.status == '1' ? '退款' : scope.row.status == '2' ? '退货退款' : '查看详情'
					}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="state.page.total"
			v-model:currentPage="state.page.currentPage"
			v-model:pageSize="state.page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts" setup name="refund">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { getPage } from '/@/api/order/orderrefund';
import { useDict } from '/@/utils/dict';
const Refund = defineAsyncComponent(() => import('./refund.vue'));
// 字典
const { refund_status } = useDict('refund_status');
const state = reactive({
	queryParams: {
		status: '',
	},
	page: {
		total: 0,
		currentPage: 1,
		pageSize: 10,
		ascs: [],
		descs: 'create_time',
	},
	tableData: [],
});
const refundRef = ref();
const loading = ref(false);
const showSearch = ref(true);
/**
 * 列表查询
 */
const initPage = async () => {
	loading.value = true;
	let params = {
		current: state.page.currentPage,
		size: state.page.pageSize,
		ascs: state.page.ascs,
		descs: state.page.descs,
	};
	await getPage(Object.assign(params, state.queryParams))
		.then((response) => {
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
const doRefund = (id: string) => {
	refundRef.value.initPage(id);
};
/**
 * 重置搜索表单
 */
const resetQuery = () => {
	state.queryParams = { status: '' };
};
initPage();
</script>
